<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="style.css">

    <style>
        /* 内部样式 */
        /* 练习时 常用  */
        p{
            color: red;
        }
    </style>
</head>
<body>

    <!-- 样式也可以直接写进标签 -->
    <!-- style 属性 样式:值;样式:值;....-->
    <!-- 行内样式 -->
    <div style="color: blue;font-size:24px;">天气很好</div>
    <p>不凡学院</p>

    <div class="d1">nihao</div>

    <!-- 三种方式 -->
    <!-- 内部样式
    优点: 结构和 样式 分离(好维护)
    缺点: 样式不能服用 -->
    <!-- 行内样式  -->
    <!-- 优点: 定位准确,,样式和结构在一块放着(耦合性太强),样式也无法复用 ,用的很少-->
    <!-- 外部样式 : 样式可以复用(比如头部底部的 公共样式)  开发时常用 -->
</body>
</html>